<!-- BEGIN: Subheader -->
<div class="m-subheader">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title m-subheader__title--separator">
				Input Groups
			</h3>
			<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
				<li class="m-nav__item m-nav__item--home">
					<a href="#" class="m-nav__link m-nav__link--icon">
						<i class="m-nav__link-icon la la-home"></i>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Forms
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Form Controls
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Input Groups
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first m--hide">
										<span class="m-nav__section-text">
											Quick Actions
										</span>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="row">
		<div class="col-md-6">
			<!--begin::Portlet-->
			<div class="m-portlet m-portlet--tab">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<span class="m-portlet__head-icon m--hide">
								<i class="la la-gear"></i>
							</span>
							<h3 class="m-portlet__head-text">
								Basic Example
							</h3>
						</div>
					</div>
				</div>
				<!--begin::Form-->
				<form class="m-form m-form--fit m-form--label-align-right">
					<div class="m-portlet__body">
						<div class="form-group m-form__group m--margin-top-10">
							<div class="alert m-alert m-alert--default" role="alert">
								Use any icon in input group from
								<a class="m-link" routerLink="/components/icons/lineawesome">
									Lineawesome
								</a>
								,
								<a class="m-link" routerLink="/components/icons/lineawesome">
									Fontawesome
								</a>
								or ,
								<a class="m-link" routerLink="/components/icons/lineawesome">
									Fontawesome
								</a>
								or
								<a class="m-link" routerLink="/components/icons/lineawesome">
									Metronic
								</a>
								icons.
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Left Addon
							</label>
							<div class="input-group m-input-group">
								<span class="input-group-addon" id="basic-addon1">
									@
								</span>
								<input type="text" class="form-control m-input" placeholder="Email" aria-describedby="basic-addon1">
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Right Addon
							</label>
							<div class="input-group">
								<input type="text" class="form-control m-input" placeholder="Username" aria-describedby="basic-addon2">
								<span class="input-group-addon" id="basic-addon2">
									@example.com
								</span>
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Joint Addons
							</label>
							<div class="input-group">
								<span class="input-group-addon">
									$
								</span>
								<span class="input-group-addon">
									0.00
								</span>
								<input type="text" class="form-control m-input" aria-label="Amount (to the nearest dollar)">
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Left & Right Addons
							</label>
							<div class="input-group m-input-group">
								<span class="input-group-addon" id="basic-addon1">
									#
								</span>
								<input type="text" class="form-control m-input" placeholder="Units" aria-describedby="basic-addon1">
								<span class="input-group-addon" id="basic-addon1">
									px
								</span>
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Solid Style
							</label>
							<div class="input-group m-input-group m-input-group--solid">
								<span class="input-group-addon" id="basic-addon1">
									Amount:
								</span>
								<input type="text" class="form-control m-input" placeholder="0.00" aria-describedby="basic-addon1">
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Square Style
							</label>
							<div class="input-group m-input-group m-input-group--square">
								<span class="input-group-addon" id="basic-addon1">
									%
								</span>
								<input type="text" class="form-control m-input" placeholder="Margin" aria-describedby="basic-addon1">
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Air Style
							</label>
							<div class="input-group m-input-group m-input-group--air">
								<span class="input-group-addon" id="basic-addon1">
									+
								</span>
								<input type="text" class="form-control m-input" placeholder="Quantity" aria-describedby="basic-addon1">
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Pill Style
							</label>
							<div class="input-group m-input-group m-input-group--pill">
								<span class="input-group-addon" id="basic-addon1">
									#
								</span>
								<input type="text" class="form-control m-input" placeholder="Amount" aria-describedby="basic-addon1">
								<span class="input-group-addon" id="basic-addon1">
									%
								</span>
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
					</div>
					<div class="m-portlet__foot m-portlet__foot--fit">
						<div class="m-form__actions">
							<button type="reset" class="btn btn-primary">
								Submit
							</button>
							<button type="reset" class="btn btn-secondary">
								Cancel
							</button>
						</div>
					</div>
				</form>
				<!--end::Form-->
			</div>
			<!--end::Portlet--> 		<!--begin::Portlet-->
			<div class="m-portlet m-portlet--tab">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<span class="m-portlet__head-icon m--hide">
								<i class="la la-gear"></i>
							</span>
							<h3 class="m-portlet__head-text">
								Icon Groups
							</h3>
						</div>
					</div>
				</div>
				<!--begin::Form-->
				<form class="m-form m-form--fit m-form--label-align-right">
					<div class="m-portlet__body">
						<div class="form-group m-form__group m--margin-top-10">
							<div class="alert m-alert m-alert--default" role="alert">
								Easily extend form controls by adding text, buttons, icons, or button groups on either side of textual.
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Left Addon
							</label>
							<div class="input-group m-input-group">
								<span class="input-group-addon" id="basic-addon1">
									<i class="la la-exclamation-triangle"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="Email" aria-describedby="basic-addon1">
							</div>
							<span class="m-form__help">
								Some help content goes here
							</span>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Right Addon
							</label>
							<div class="input-group">
								<input type="text" class="form-control m-input" placeholder="Recipient's username" aria-describedby="basic-addon2">
								<span class="input-group-addon" id="basic-addon2">
									<i class="la la-group"></i>
								</span>
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Joint Addons
							</label>
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
								</span>
								<span class="input-group-addon">
									USD
								</span>
								<input type="text" class="form-control m-input" placeholder="0.00" aria-label="Amount (to the nearest dollar)">
								<span class="input-group-addon">
									<i class="la la-registered"></i>
								</span>
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Both Addons
							</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon2">
									<i class="flaticon-refresh"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="Recipient's username" aria-describedby="basic-addon2">
								<span class="input-group-addon" id="basic-addon2">
									<i class="flaticon-music-1"></i>
								</span>
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Solid Style
							</label>
							<div class="input-group m-input-group m-input-group--solid">
								<span class="input-group-addon" id="basic-addon1">
									<i class="la la-bar-chart"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="Unit" aria-describedby="basic-addon1">
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Square Style
							</label>
							<div class="input-group m-input-group m-input-group--square">
								<span class="input-group-addon" id="basic-addon1">
									<i class="la la-user"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="Amount" aria-describedby="basic-addon1">
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Air Style
							</label>
							<div class="input-group m-input-group m-input-group--air">
								<span class="input-group-addon" id="basic-addon1">
									<i class="la la-exclamation-triangle"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="URL" aria-describedby="basic-addon1">
							</div>
						</div>
						<div class="form-group m-form__group">
							<label for="exampleInputEmail1">
								Pill Style
							</label>
							<div class="input-group m-input-group m-input-group--pill">
								<span class="input-group-addon" id="basic-addon1">
									<i class="la la-gear"></i>
								</span>
								<input type="text" class="form-control m-input" placeholder="Email" aria-describedby="basic-addon1">
							</div>
						</div>
					</div>
					<div class="m-portlet__foot m-portlet__foot--fit">
						<div class="m-form__actions">
							<button type="reset" class="btn btn-primary">
								Submit
							</button>
							<button type="reset" class="btn btn-secondary">
								Cancel
							</button>
						</div>
					</div>
				</form>
				<!--end::Form-->
			</div>
			<!--end::Portlet--> 		<!--begin::Portlet-->
			<div class="m-portlet m-portlet--tab">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<span class="m-portlet__head-icon m--hide">
								<i class="la la-gear"></i>
							</span>
							<h3 class="m-portlet__head-text">
								Sizing
							</h3>
						</div>
					</div>
				</div>
				<!--begin::Form-->
				<form class="m-form m-form--fit m-form--label-align-right">
					<div class="m-portlet__body">
						<div class="form-group m-form__group m--margin-top-10">
							<div class="alert m-alert m-alert--default" role="alert">
								Add the relative form sizing classes to the
								<code>
								.input-group
							</code>
							itself and contents within  							will automatically resize.
						</div>
					</div>
					<div class="form-group m-form__group">
						<label for="exampleInputEmail1">
							Large Input Group
						</label>
						<div class="input-group input-group-lg m-input-group">
							<span class="input-group-addon" id="basic-addon1">
								<i class="la la-exclamation-triangle"></i>
							</span>
							<input type="text" class="form-control m-input" placeholder="Large size" aria-describedby="basic-addon1">
						</div>
						<span class="m-form__help">
							Some help content goes here
						</span>
					</div>
					<div class="form-group m-form__group">
						<label for="exampleInputEmail1">
							Large Input Group
						</label>
						<div class="input-group input-group-lg m-input-group">
							<span class="input-group-addon">
								<i class="flaticon-refresh"></i>
							</span>
							<span class="input-group-addon">
								0.00
							</span>
							<input type="text" class="form-control m-input" aria-label="Large size">
						</div>
					</div>
					<div class="form-group m-form__group">
						<label for="exampleInputEmail1">
							Small Input Group
						</label>
						<div class="input-group input-group-sm">
							<input type="text" class="form-control m-input" placeholder="Small size" aria-describedby="basic-addon2">
							<span class="input-group-addon" id="basic-addon2">
								<i class="la la-group"></i>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group input-group-sm">
						<label for="exampleInputEmail1">
							Small Input Group
						</label>
						<div class="input-group input-group-sm">
							<span class="input-group-addon" id="basic-addon2">
								<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
							</span>
							<input type="text" class="form-control m-input" placeholder="Small size" aria-describedby="basic-addon2">
						</div>
					</div>
				</div>
				<div class="m-portlet__foot m-portlet__foot--fit">
					<div class="m-form__actions">
						<button type="reset" class="btn btn-primary">
							Submit
						</button>
						<button type="reset" class="btn btn-secondary">
							Cancel
						</button>
					</div>
				</div>
			</form>
			<!--end::Form-->
		</div>
		<!--end::Portlet-->
	</div>
	<div class="col-md-6">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon m--hide">
							<i class="la la-gear"></i>
						</span>
						<h3 class="m-portlet__head-text">
							Icon Input Groups
						</h3>
					</div>
				</div>
			</div>
			<!--begin::Form-->
			<form class="m-form m-form--fit m-form--label-align-right">
				<div class="m-portlet__body">
					<div class="form-group m-form__group m--margin-top-10">
						<div class="alert m-alert m-alert--default" role="alert">
							Use any icon in input group from
							<a class="m-link" routerLink="/components/icons/lineawesome">
								Lineawesome
							</a>
							,
							<a class="m-link" routerLink="/components/icons/lineawesome">
								Fontawesome
							</a>
							or ,
							<a class="m-link" routerLink="/components/icons/lineawesome">
								Fontawesome
							</a>
							or
							<a class="m-link" routerLink="/components/icons/lineawesome">
								Metronic
							</a>
							icons.
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Left Icon
						</label>
						<div class="m-input-icon m-input-icon--left">
							<input type="text" class="form-control m-input" placeholder="Email">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-map-marker"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Right Icon
						</label>
						<div class="m-input-icon m-input-icon--right">
							<input type="text" class="form-control m-input" placeholder="Email">
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-unlock-alt"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Both Icons
						</label>
						<div class="m-input-icon m-input-icon--left m-input-icon--right">
							<input type="text" class="form-control m-input" placeholder="Email">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-tag"></i>
								</span>
							</span>
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-thumb-tack"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Solid Style Input
						</label>
						<div class="m-input-icon m-input-icon--left m-input-icon--right">
							<input type="text" class="form-control m-input m-input--solid" placeholder="Tags">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-tag"></i>
								</span>
							</span>
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-check-circle-o"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Pill Style Input
						</label>
						<div class="m-input-icon m-input-icon--left m-input-icon--right">
							<input type="text" class="form-control m-input m-input--pill" placeholder="URL">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-tag"></i>
								</span>
							</span>
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-comments-o"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Pill & Air Style Input
						</label>
						<div class="m-input-icon m-input-icon--left m-input-icon--right">
							<input type="text" class="form-control m-input m-input--pill m-input--air" placeholder="Amount">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-user"></i>
								</span>
							</span>
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-info-circle"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Square Style Input
						</label>
						<div class="m-input-icon m-input-icon--left m-input-icon--right">
							<input type="text" class="form-control m-input m-input--square" placeholder="Quantity">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-tag"></i>
								</span>
							</span>
							<span class="m-input-icon__icon m-input-icon__icon--right">
								<span>
									<i class="la la-thumb-tack"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Large Input
						</label>
						<div class="m-input-icon m-input-icon--left">
							<input type="text" class="form-control form-control-lg m-input" placeholder="Price">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-map-marker"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Small Input
						</label>
						<div class="m-input-icon m-input-icon--left">
							<input type="text" class="form-control form-control-sm m-input" placeholder="Margins">
							<span class="m-input-icon__icon m-input-icon__icon--left">
								<span>
									<i class="la la-cloud-upload"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="m-form__actions">
						<button type="reset" class="btn btn-success">
							Submit
						</button>
						<button type="reset" class="btn btn-secondary">
							Cancel
						</button>
					</div>
				</div>
				<div class="m-portlet__foot m-portlet__foot--fit">
					<div class="m-form__actions">
						<button type="reset" class="btn btn-primary">
							Submit
						</button>
						<button type="reset" class="btn btn-secondary">
							Cancel
						</button>
					</div>
				</div>
			</form>
			<!--end::Form-->
		</div>
		<!--end::Portlet--> 		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon m--hide">
							<i class="la la-gear"></i>
						</span>
						<h3 class="m-portlet__head-text">
							Checkboxes and Radio addons
						</h3>
					</div>
				</div>
			</div>
			<!--begin::Form-->
			<form class="m-form">
				<div class="m-portlet__body">
					<div class="form-group m-form__group m--margin-top-10">
						<div class="alert m-alert m-alert--default" role="alert">
							Place any checkbox or radio option within an input group’s addon instead of text.
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Left Checkbox Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								<label class="m-checkbox m-checkbox--single m-checkbox--state m-checkbox--state-success">
									<input type="checkbox" checked="">
									<span></span>
								</label>
							</span>
							<span class="input-group-addon">
								$
							</span>
							<input type="text" class="form-control" aria-label="Text input with checkbox">
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Right Checkbox Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								$
							</span>
							<input type="text" class="form-control" aria-label="Text input with checkbox">
							<span class="input-group-addon">
								<label class="m-checkbox m-checkbox--single m-checkbox--state m-checkbox--state-primary">
									<input type="checkbox" checked="">
									<span></span>
								</label>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Right & Left Checkbox Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								<label class="m-checkbox m-checkbox--single">
									<input type="checkbox">
									<span></span>
								</label>
							</span>
							<input type="text" class="form-control" aria-label="Text input with checkbox">
							<span class="input-group-addon">
								<label class="m-checkbox m-checkbox--single">
									<input type="checkbox">
									<span></span>
								</label>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Left Radio Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								<label class="m-radio m-radio--single m-radio--state m-radio--state-success">
									<input type="radio" checked="">
									<span></span>
								</label>
							</span>
							<span class="input-group-addon">
								$
							</span>
							<input type="text" class="form-control" aria-label="Text input with radio">
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Right Radio Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								$
							</span>
							<input type="text" class="form-control" aria-label="Text input with radio">
							<span class="input-group-addon">
								<label class="m-radio m-radio--single m-radio--state m-radio--state-primary">
									<input type="radio" checked="">
									<span></span>
								</label>
							</span>
						</div>
					</div>
					<div class="form-group m-form__group">
						<label>
							Right & Left Radio Addon
						</label>
						<div class="input-group m-form__group">
							<span class="input-group-addon">
								<label class="m-radio m-radio--single">
									<input type="radio">
									<span></span>
								</label>
							</span>
							<input type="text" class="form-control" aria-label="Text input with radio">
							<span class="input-group-addon">
								<label class="m-radio m-radio--single">
									<input type="radio">
									<span></span>
								</label>
							</span>
						</div>
					</div>
				</div>
				<div class="m-portlet__foot m-portlet__foot--fit">
					<div class="m-form__actions">
						<button type="reset" class="btn btn-primary">
							Submit
						</button>
						<button type="reset" class="btn btn-secondary">
							Cancel
						</button>
					</div>
				</div>
			</form>
			<!--end::Form-->
		</div>
		<!--end::Portlet--> 		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon m--hide">
							<i class="la la-gear"></i>
						</span>
						<h3 class="m-portlet__head-text">
							Button Addons
						</h3>
					</div>
				</div>
			</div>
			<!--begin::Form-->
			<form class="m-form m-form--fit m-form--label-align-right">
				<div class="m-portlet__body">
					<div class="form-group m-form__group m--margin-top-10">
						<div class="alert m-alert m-alert--default" role="alert">
							Buttons in input groups must wrapped in a
							<code>
							.input-group-btn
						</code>
						for proper alignment and sizing.  							This is required due to default browser styles that cannot be overridden.
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left Addon Button
					</label>
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-secondary" type="button">
								Go!
							</button>
						</span>
						<input type="text" class="form-control" placeholder="Search for...">
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Right Addon Button
					</label>
					<div class="input-group">
						<input type="text" class="form-control" placeholder="Search for...">
						<span class="input-group-btn">
							<button class="btn btn-secondary" type="button">
								Go!
							</button>
						</span>
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left & Right Addon Button
					</label>
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-secondary" type="button">
								Go!
							</button>
						</span>
						<input type="text" class="form-control" placeholder="Search for...">
						<span class="input-group-btn">
							<button class="btn btn-secondary" type="button">
								Go!
							</button>
						</span>
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left Addon Button
					</label>
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-brand" type="button">
								Go!
							</button>
						</span>
						<input type="text" class="form-control" placeholder="Search for...">
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Right Addon Button
					</label>
					<div class="input-group">
						<input type="text" class="form-control" placeholder="Search for...">
						<span class="input-group-btn">
							<button class="btn btn-primary" type="button">
								Go!
							</button>
						</span>
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left & Right Addon Button
					</label>
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-success" type="button">
								Go!
							</button>
						</span>
						<input type="text" class="form-control" placeholder="Search for...">
						<span class="input-group-btn">
							<button class="btn btn-warning" type="button">
								Go!
							</button>
						</span>
					</div>
				</div>
			</div>
			<div class="m-portlet__foot m-portlet__foot--fit">
				<div class="m-form__actions">
					<button type="reset" class="btn btn-primary">
						Submit
					</button>
					<button type="reset" class="btn btn-secondary">
						Cancel
					</button>
				</div>
			</div>
		</form>
		<!--end::Form-->
	</div>
	<!--end::Portlet--> 		<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Buttons With Dropdowns
					</h3>
				</div>
			</div>
		</div>
		<!--begin::Form-->
		<form class="m-form m-form--fit m-form--label-align-right">
			<div class="m-portlet__body">
				<div class="form-group m-form__group m--margin-top-10">
					<div class="alert m-alert m-alert--default" role="alert">
						The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left Button Dropdown
					</label>
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Action
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">
									Action
								</a>
								<a class="dropdown-item" href="#">
									Another action
								</a>
								<a class="dropdown-item" href="#">
									Something else here
								</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">
									Separated link
								</a>
							</div>
						</div>
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Right Button Dropdown
					</label>
					<div class="input-group">
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
						<div class="input-group-btn">
							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Action
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">
									Action
								</a>
								<a class="dropdown-item" href="#">
									Another action
								</a>
								<a class="dropdown-item" href="#">
									Something else here
								</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">
									Separated link
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group m-form__group">
					<label>
						Left & Right Button Dropdown
					</label>
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Action
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">
									Action
								</a>
								<a class="dropdown-item" href="#">
									Another action
								</a>
								<a class="dropdown-item" href="#">
									Something else here
								</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">
									Separated link
								</a>
							</div>
						</div>
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
						<div class="input-group-btn">
							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Action
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">
									Action
								</a>
								<a class="dropdown-item" href="#">
									Another action
								</a>
								<a class="dropdown-item" href="#">
									Something else here
								</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">
									Separated link
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="m-portlet__foot m-portlet__foot--fit">
				<div class="m-form__actions">
					<button type="reset" class="btn btn-primary">
						Submit
					</button>
					<button type="reset" class="btn btn-secondary">
						Cancel
					</button>
				</div>
			</div>
		</form>
		<!--end::Form-->
	</div>
	<!--end::Portlet-->
</div>
</div>
</div>
